<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      该层级用户锁定名单
    </template>
    <el-table
      class="el-table-align-center"
      :data="tableData"
      border
      ref="multipleTable"
      v-loading="loading"
      max-height="250"
      element-loading-text="加载中..."
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="用户名" prop="username">
        <template slot-scope="{row}">
          {{row}}
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="unlockMembers" :loading="loading">解锁
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { unlockUserLevel, getUserLevelMembers } from '@/services/api/userLevel';
import { getMemberList } from '@/services/api/member';

import { form, grid } from '@/build';

export default {

  name: 'level-member-dialog',

  props: ['value', 'level', 'rowData'],

  mixins: [form, grid],

  data() {
    return {
      levelList: [],
      tableData: [],
      filters: {
        levelId: this.rowData.levelId,
      },
      form: {},
      username: [],
    };
  },
  methods: {
    memberSearchHandler() {
      this.loading = true;
      getMemberList(this.form).then(([result, data]) => {
        if (result) {
          this.loading = false;
          this.tableData.list = data.items;
          this.tableData.total = data.total;
        }
      });
    },
    // 表格前面的checkbox操作
    handleSelectionChange(val) {
      this.username = val;
    },

    unlockMembers() {
      const { levelId } = this.rowData;
      unlockUserLevel({ username: this.username.join(','), levelId }).then(([result, data]) => {
        if (result) {
          this.$notify({
            title: '解锁成功！',
            type: 'success',
            duration: 2000,
          });
          this.$emit('input', false);
          this.$parent.getAll();
        }
      });
    },
  },
  mounted() {
    this.bindGet(getUserLevelMembers, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>
</style>
